<template>
    <div >
        <div v-if="active==0">
            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple-dark"><span style="font-size: 30px;font-weight: 600">代开发票</span>
                    </div>
                </el-col>
            </el-row>
            <el-form style="margin-left: 30px;margin-top: 30px">
                <el-form-item label="案件：">
                    <el-input style="width: 500px;" @focus="dialogVisible=true" v-model="caseValue"></el-input>
                </el-form-item>
                <el-form-item style="margin-left: 50px">
                    <el-button type="primary" @click="nextPage">下一步</el-button>
                </el-form-item>
            </el-form>
            <div>
                <el-dialog
                        title="提示"
                        :visible.sync="dialogVisible"
                        width="60%"
                >
                    <div>
                        <el-col :span="24">
                        </el-col>
                        <el-table
                                :data="cases2.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                                border
                                style="width: 100%;font-size: 18px;" @selection-change="handler">
                            <el-table-column
                                    type="selection"
                                    width="55">
                            </el-table-column>
                            <el-table-column
                                    prop="id"
                                    label="" v-if="false">
                            </el-table-column>
                            <el-table-column
                                    prop="caseNo"
                                    label="案号">
                            </el-table-column>
                            <el-table-column
                                    prop="caseWtr"
                                    label="委托人">
                            </el-table-column>
                            <el-table-column
                                    prop="caseOppositeParties"
                                    label="对方当事人">
                            </el-table-column>
                            <el-table-column
                                    prop="caseAttorney"
                                    label="承办律师">
                            </el-table-column>
                            <el-table-column
                                    prop="collectionTime"
                                    label="收案日期">
                            </el-table-column>

                        </el-table>
                        <el-divider></el-divider>
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                :page-sizes="[5, 10, 20, 40]"
                                :page-size="pagesize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="cases2.length"> //这是显示总共有多少数据，
                        </el-pagination>
                    </div>
                    <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible = false">退出</el-button>
  </span>
                </el-dialog>
            </div>
        </div>

        <div v-if="active==1" style="width: 100%;">
            <law-invoice :law="caseType" @back="back"></law-invoice>
        </div>
    </div>
</template>

<script>
    import CaseLawService from '../../../model/gs/CaseLawService'


    const LawInvoice = () => import('../../../components/gs/CaseList/LawInvoice')

    const caseLawService = CaseLawService.getInstance();
    export default {
        name: "ActApplyBill",
        data() {
            return {
                dialogVisible: false,
                cases2: [],
                currentPage: 1, //初始页
                pagesize: 5,  //每页的数据
                caseValue:'',
                caseType: {},
                active: 0,  //默认页面状态
            }
        },
        methods: {
            caseData() {
                this.dialogVisible = !this.dialogVisible
            },
            List() {
                caseLawService.list().then((response) => {
                    this.cases2 = response.data.data
                })
            },
            handleSizeChange(size) {
                this.pagesize = size; //每页下拉显示数据

            },
            handleCurrentChange(currentPage) {
                this.currentPage = currentPage; //点击第几页

            },
            handler(selection) {
                if (selection.length != 0) {
                    this.caseType = selection[0]
                    this.caseValue = selection[0].caseNo
                }
                this.dialogVisible = false
            },
            nextPage() {
                if(this.caseValue==''){
                        this.$message('请选择案件');
                        return;

                }
                this.active++
            },
            back() {
                this.active--
            }

        },
        created() {
            this.List()
        },
        components: {
            LawInvoice
        }

    }
</script>

<style scoped>
    .el-row {
        margin-top: 50px;
        margin-left: 30px;
    }

    span > .red {
        color: red;
        font-size: 20px;
    }

    span {
        font-size: 15px;
        font-weight: 600;
    }
</style>
